<template>
    <div id="contentbox" @scroll="Top" ref="content">
        <swiper :aspect-ratio="300/500" :list="list" loop auto></swiper>
        <div class="item"><img src="http://mall.guolehui.com.cn/public/images/57/c7/f0/0744c487e6f6e01f323bfb102f4d89d934894cf2.jpg?1507451156#w" alt=""></div>
        <div id="searchbar" class="clr" :class="{'top1':isshow,'top2':!isshow}">
            <input type="text" style="display:none">
            <router-link to="/goods/car"><img src="../assets/cart1.png" alt=""></router-link>
        </div>
        <div class="box">
            <div class="app-pic">
                <div class="fore" v-for="p in pic" :key="p.title">
                    <router-link :to="p.ps" v-if="!islogin">
                        <img :src="p.img" alt="">
                        <br>
                        <span>{{p.title}}</span>
                    </router-link>
                    <router-link :to="p.pss" v-else>
                        <img :src="p.img" alt="">
                        <br>
                        <span>{{p.title}}</span>
                    </router-link>
                </div>
            </div>
        </div>
        <div id="wrap">
            <div class="hot-pic">
                <div v-for="i in img" :key="i.imgs" class="tp">
                    <img :src="i.imgs" alt="">
                </div>
            </div>
            <div>
                <h2 class="title">精选鲜果</h2>
                <div class="hot-pic">
                    <div v-for="i in meiri" :key="i.imgs" class="tp">
                        <img :src="i.imgs" alt="">
                    </div>
                </div>
                <div class="hot-pic">
                    <div v-for="i in day" :key="i.imgs" class="tp">
                        <img :src="i.imgs" alt="">
                    </div>
                </div>
            </div>
            <div v-for="i in c" :key="i.imgs" class="tp">
                <img :src="i.imgs" alt="">
            </div>
            <div>
                <h2 class="title">热门鲜果</h2>
                <div class="hot-pic">
                    <div v-for="i in xianguo" :key="i.imgs" class="tp">
                        <img :src="i.imgs" alt="">
                    </div>
                </div>
                <div class="hot-pic">
                    <div v-for="i in more" :key="i.imgs" class="tp">
                        <img :src="i.imgs" alt="">
                    </div>
                </div>
            </div>
            <div>
                <h3 class="title">下面更多鲜果哟!</h3>
                <div id="fruit-content">
                    <router-link :to="'/goods/goodsdetails/'+s._id" v-for="s in select" :key="s.goodsname" class="fruit-box">
                        <div>
                            <img :src="s.pic[0]" alt="">
                            <span>{{s.goodsname}}</span>
                            <p>{{s.goodsprice|currency("￥",2)}}</p>
                        </div>
                    </router-link>
                </div>
                <div id="spin">
                    <div class="spin-box" v-show="!isbottom">
                        <span>正在努力加载</span>
                        <span class="fa fa-spinner fa-spin"></span>
                    </div>
                    <div class="spin-box" v-show="isbottom">
                        <span>到底了！</span>
                    </div>
                </div>
            </div>

            <div class="outer" id="outers">
                <div class="s-quick">
                    <router-link class="one same" to="">
                        <img src="http://www.guolehui.com.cn/wap_themes/1448459509/images/i/btn01.png" alt="">
                        <br>
                        <span>首页</span>
                    </router-link>
                    <router-link class="two same" to="/goods/car">
                        <img src="http://www.guolehui.com.cn/wap_themes/1448459509/images/i/cart1.png" alt="">
                        <br>
                        <span>购物车</span>
                    </router-link>
                    <router-link class="three same" to="">
                        <img src="http://www.guolehui.com.cn/wap_themes/1448459509/images/i/btn03.png" alt="">
                        <br>
                        <span>收藏</span>
                    </router-link>
                    <router-link class="four same" to="/sort">
                        <img src="http://www.guolehui.com.cn/wap_themes/1448459509/images/i/btn04.png" alt="">
                        <br>
                        <span>商品分类</span>
                    </router-link>
                    <router-link class="five same" to="/myself" v-if="islogin">
                        <img src="http://www.guolehui.com.cn/wap_themes/1448459509/images/i/btn05.png" alt="">
                        <br>
                        <span>会员中心</span>
                    </router-link>
                    <router-link class="five same" to="/login" v-else>
                        <img src="http://www.guolehui.com.cn/wap_themes/1448459509/images/i/btn05.png" alt="">
                        <br>
                        <span>会员中心</span>
                    </router-link>
                    <div class="s-con1" id="boqs">
                        <div id="boq" @touchstart="close">x</div>
                    </div>
                </div>
            </div>
            <div id="lastline">
                <div class="s-quick-btn" @touchstart="chuxian">
                    <div class="textbox">+</div>
                </div>
            </div>

        </div>

        <footers></footers>
        <div class="six" @touchstart="returntop" v-show="isshow">
            <div class="lastpic"><img src="../assets/to-top.png" alt=""></div>
        </div>
    </div>
</template>

<script>
import footers from "../components/footers"
import { Swiper, Divider, SwiperItem } from 'vux';
export default {
    data() {
        return {
            list: [],
            pic: [],
            scroll: "",
            islogin: false,
            img: [],
            day: [],
            meiri: [],
            c: [],
            xianguo: [],
            more: [],
            select: [],
            isshow: false,
            isloading: false,
            isbottom: false,
            currentScrollTop:0
        }
    },
    components: {
        Swiper,
        Divider,
        SwiperItem,
        footers
    },
    // activated () {
    //     this.$refs.content.scrollTop  = this.currentScrollTop;  
    // },
    methods: {

        Top: function(e) {
            var a = e.target.scrollHeight - e.target.offsetHeight - e.target.scrollTop
            // console.log(a)
            if (e.target.scrollTop > 200) {
                this.isshow = true;
            } else {
                this.isshow = false;
            }
            if (a < 150) {
                this.requestMore();
            }
        },
        requestMore: function() {
            if (this.isloading) {
                return;
            } else {
                this.isloading = true;
                var a = this.select.length / 6
                this.http.get("/api/goods", { params: { i: a } })
                    .then(res => {
                        this.select = this.select.concat(res.data.data);
                        if (res.data.data.length < 6) {
                            this.isbottom = true;
                        }
                        this.isloading = false;
                    })
            }
        },
        chuxian: function() {
            // console.log(123);
            var sq = document.getElementById("outers");
            sq.style.display = "block";
            var lastline = document.getElementById("lastline");
            lastline.style.display = "none";
        },
        close: function() {
            var sq = document.getElementById("outers");
            sq.style.display = "none";
            var lastline = document.getElementById("lastline");
            lastline.style.display = "block";
        },
        returntop: function() {
            var a = this.$refs.content;
            // console.log(document.documentElement.scrollTop);
            a.scrollTop = 0;
        }
    },
    mounted() {
        this.$store.dispatch("loginRequest")
            .then(res => {
                // console.log(res)
                if (res) {
                    this.islogin = true;
                }
            }),
            this.http.get("/api/user")
                .then(res => {
                    this.list = res.data.list;
                }),
            this.http.get("/api/navimg")
                .then(res => {
                    this.pic = res.data.list;
                }),
            this.http.post("/api/hot")
                .then(res => {
                    //    console.log(res.data.img) 
                    var b = res.data.img
                    this.img = b.slice(0, 3);
                    this.day = b.slice(4, 7);
                    this.c = b.slice(7, 10);
                    this.meiri = b.slice(11, 13);
                    this.xianguo = b.slice(13, 15);
                    this.more = b.slice(15, 18);
                    // console.log(this.xianguo);
                }),
            this.http.get("/api/goods", { params: { i: 0 } })
                .then(res => {
                    // console.log(res.data.data);
                    this.select = res.data.data;
                })
    },
    filters: {
        currency: function(money, prefix = "$", num = 2) {
            var r = money.toFixed(num);
            r = prefix + r;
            return r;
        }
    }
}
</script>

<style scoped>
.top1 {
    position: fixed;
    top: 0;
    background-color: #f8f8f8;
    display: block;
}

.top2 {
    position: absolute;
    top: 260px;
    display: none;
}

.title {
    font-size: 4vw;
    color: #353d44;
    border-left: 5px solid #353d44;
    padding-left: 0.1rem;
    font-weight: normal;
}

.hot-pic {
    display: flex;
    justify-content: space-between;
}

.tp {
    border: solid 1px #f2f2f2;
}

.tp img {
    width: 100%;
}

#fruit-content {
    display: flex;
    flex-wrap: wrap;
}

.fruit-box {
    width: 50%;
    background-color: white;
    border: solid 5px #f2f2f2;
}

.fruit-box span {
    font-size: 12px;
    color: #353d44;
}

.fruit-box p {
    color: red;
    font-size: 14px;
}

.fruit-box img {
    width: 100%;
}

a {
    text-decoration: none;
    color: #666;
}

#contentbox {
    overflow-y: scroll;
    height: 100vh;
    background-color: #F2F2F2;
}

.item img {
    width: 100%;
}

.box {
    width: 100%;
    height: 84px;
}

.app-pic {
    display: flex;
    justify-content: space-around;
}

#outer {
    display: none;
}

.app-pic img {
    width: 2.5rem;
    height: 2.5rem;
    margin: 4px auto;
}

.fore {
    width: 20%;
    height: 84px;
    text-align: center;
}

.app-pic span {
    color: #7b7f82;
    font-size: 0.48rem;
}

#searchbar {
    width: 100%;
    height: 2rem;
    /*border: solid 1px black;*/
}

#searchbar img {
    float: right;
    height: 70%;
    margin-top: 5px;
}

.clr {
    clear: both;
}

#lastline {
    display: block;
}

#wrap {
    width: 95%;
    margin: 0 auto;
    /*border: solid 1px black;*/
    background-color: #F2F2F2;
}

#lastline {
    position: fixed;
    bottom: 50px;
}

.s-quick-btn {
    width: 2rem;
    height: 2rem;
    background-color: #1BAB14;
    border-radius: 50%;
    position: absolute;
    /*left: 10px;*/
}

.textbox {
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 2rem;
}

.outer {
    position: fixed;
    bottom: 260px;
}

#outers {
    display: none;
}

.s-quick {
    position: absolute;
    width: 65vw;
    height: 65vw;
    border: 1px solid #dbdbdb;
    border-radius: 50%;
    left: -25vw;
    bottom: -200px;
    font-size: 14px;
    text-align: center;
    background-color: white;
}

.s-quick img {
    height: 8vw;
    padding: 0 3vw;
    /*margin: 0 auto;*/
}

.s-con1 {
    position: absolute;
    left: 24vw;
    top: 25vw;
    width: 13vw;
    height: 13vw;
    border-radius: 50%;
    border: solid 1px #dbdbdb;
}

#boq {
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    color: #dbdbdb;
}

.same {
    height: 16vw;
    width: 19vw;
    /*border: solid 1px black;*/
    position: absolute;
}

.one {
    left: 22vw;
    top: 3vw;
}

.two {
    left: 37vw;
    top: 10vw;
}

.three {
    left: 46vw;
    top: 27vw;
}

.four {
    left: 37vw;
    top: 43vw;
}

.five {
    left: 22vw;
    top: 48vw;
}

.lastpic {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #5B6167;
}

.six {
    position: fixed;
    bottom: 17px;
    right: 11px;
}

.six img {
    height: 1.5rem;
    padding-top: 0.3rem;
    padding-left: 0.5rem;
    /*text-align: center;*/
}

#spin {
    width: 96vw;
    height: 20px;
}

.spin-box {
    font-size: 14px;
    color: #666;
    width: 30vw;
    height: 20px;
    margin: 0 auto;
    text-align: center;
}

.spining {}
</style>